import React, {Component} from 'react';

import PubSub from "pubsub-js"
class Search extends Component {
    search = async () => {
        // // 获取用户输入(连续解构赋值+重命名)
        // const {keyWordElement: {value: keyWord}} = this
        // // 发送请求前通知App更新状态,既然准备点击按钮发送请求就不再是第一次进入界面
        // // this.props.updateAppState({isFirst: false, isLoading: true})
        // console.log('message发布消息了')
        // PubSub.publish('message',{isFirst: false, isLoading: true})
        // // console.log('keyWord',keyWord)
        // // 发送请求
        // axios.get(`/api/search/users?q=${keyWord}`).then(
        //     // 请求成功后通知App更新状态
        //     response => {
        //
        //         // this.props.updateAppState({isLoading: false, users: response.data.items})
        //         PubSub.publish("message",{isLoading: false, users: response.data.items})
        //     },
        //     error => {
        //         // this.props.updateAppState({isLoading: false, err: error.message})
        //
        //         PubSub.publish("message",{isLoading: false, err: error.message})
        //     }
        // )

        const {keyWordElement: {value: keyWord}} = this
        PubSub.publish('message',{isFirst: false, isLoading: true})
        // 未优化的fetch
        //#region fetch(`/api/search/users?q=${keyWord}`).then(
        //     response=>{
        //         console.log("联系服务器成功",response)
        //         return response.json()
        //     },
        //     error=>{
        //         console.log("联系服务器失败",error)
        //         // 失败的回调也是有返回值的,返回值是undefined
        //         // 如果失败的回调返回的是一个非promise值,那么前面.then的promise实例状态为成功,值为undefined
        //         // 中断promise链,返回初始化状态的Promise实例
        //         return new Promise(()=>{})
        //
        //
        //     }
        // ).then(
        //     response=>{
        //         console.log("获取数据成功了",response)
        //     },
        //     error=>{
        //         console.log('获取数据失败了',error)
        //     }
        //#endregion )

        // 优化的fetch
        try{
            const response = await fetch(`/api/search/users?q=${keyWord}`)
            console.log("response",response)
            const data = await response.json()
            console.log("获取的数据为",data)
            PubSub.publish("message",{isLoading: false, users: data.items})
        }catch (err){
            console.log("出错了",err)
            PubSub.publish("message",{isLoading: false, err: err.message})
        }
    }


    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">搜索github用户</h3>
                <div>
                    <input ref={c => this.keyWordElement = c} type="text" placeholder="输入关键字"/>&nbsp;
                    <button onClick={this.search}>搜索</button>
                </div>
            </section>
        );
    }
}

export default Search;
